<template>
  <div
    class="loading"
    element-loading-text="熊猫不走蛋糕来了..."
    data-v-31d8889e=""
    loading-number="1"
  >
    <el-skeleton style="width: 100%; padding: 42px; background-color: white;" :loading="loading" animated>
      <template #template>
        <div class="flex items-center" style="padding: 24px 220px; margin-bottom: 40px;">
          <el-skeleton-item variant="text" style="height:80px; width: 80px; margin-right: 84px;"  />
          <el-skeleton-item variant="text" style="height:40px; width: 80px; margin-right: 84px;"  />
          <el-skeleton-item variant="text" style="height:40px; width: 80px; margin-right: 84px;"  />
          <el-skeleton-item variant="text" style="height:40px; width: 80px; margin-right: 84px;"  />
          <el-skeleton-item variant="text" style="height:40px; width: 80px; margin-right: 213px;"  />
          <el-skeleton-item variant="text" style="height:40px; width: 80px; margin-right: 84px;"  />
          <el-skeleton-item variant="text" style="height:40px; width: 80px; margin-right: 84px;"  />
        </div>
        <el-skeleton-item variant="text" style="height:275px; width: 100%; margin-bottom: 40px;"  />
        <div class="flex flex-col justify-center w-full" style="margin-bottom: 80px">
          <el-skeleton-item variant="text" style="height:60px; width: 1150px; margin-bottom: 50px;"  />
          <el-skeleton-item variant="text" style="height:60px; width: 1550px; ;"  />
        </div>
        <el-skeleton-item variant="text" style="height:120px; width: 100%;;"  />
      </template>

      <template #default>
        <el-card :body-style="{ padding: '0px', marginBottom: '1px' }">
          <div style="padding: 14px">
            <span>Delicious hamburger</span>
            <div class="bottom card-header">
              <div class="time">currentDate </div>
              <el-button text class="button">Operation button</el-button>
            </div>
          </div>
        </el-card>
      </template>
    </el-skeleton>
  </div>
</template>

<script lang="ts">
import { defineNuxtComponent } from "#app";
export default defineNuxtComponent({
  setup() {
    const loading = ref(true)
    return {
      loading,
      fontSize: "24px",
    };
  },
});
</script>
<style lang="scss" scoped>
.loading {
  height: 100vh;
  width: 100vw;
  position: fixed !important;
  top: 0;
  z-index: 1000;
  .el-loading-mask {
    background-color: #fff;
  }
  .loading-spinner {
    position: absolute;
    top: 50%;
    margin-top: -80px;
    width: 100%;
  }
  .loading-img {
    margin: 0 auto;
    width: 258px;
    height: 160px;
  }
}
</style>
